<%--
  Created by IntelliJ IDEA.
  User: 86187
  Date: 2021/11/27
  Time: 16:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui/layui.js" charset="UTF-8"></script>
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/admin.css"/>
    <script>
        L2Dwidget.init({
            "model": { "jsonPath":"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
            "display": { "position": "right", "width": 200, "height": 200, "hOffset": 0, "vOffset": 0 },
            "mobile": { "show": true, "scale": 0.5 },
            "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 },
        });
    </script>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    在售书数量
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">本</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font" id="bookscount1"></p>
                    <p>
                        在售书占比
                        <span class="layuiadmin-span-color"><i class="layui-inline layui-icon layui-icon-face-smile" id="bookb1"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    下架书数量
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">本</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font" id="bookscount2"></p>
                    <p>
                        下架书占比
                        <span class="layuiadmin-span-color"><i class="layui-inline layui-icon layui-icon-face-cry" id="bookb2"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    总库存量
                    <span class="layui-badge layui-bg-green layuiadmin-badge">本</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font" id="bookscount3"></p>
                    <p>
                        库存状态
                        <span class="layuiadmin-span-color"><i class="layui-inline layui-icon layui-icon-cart" id="bookb3"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    公司在职员工
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">人</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font" id="bookscount4"></p>
                    <p>
                        所在部门占比
                        <span class="layuiadmin-span-color"><i class="layui-inline layui-icon layui-icon-user" id="bookb4"></i></span>
                    </p>
                </div>
            </div>
        </div>
<%--        <div class="layui-col-sm12">--%>
<%--            <div class="layui-card" style="height: 450px">--%>
<%--                <div class="layui-card-header">--%>
<%--                    仓库书籍库存详情--%>
<%--                </div>--%>
<%--                <div class="layui-card-body">--%>
<%--                    <form class="layui-form" lay-filter="formTest">--%>
<%--                        <label class="layui-form-label" style="width: 30%">书籍库存查询:</label>--%>
<%--                        <div class="layui-input-inline">--%>
<%--                            <input type="text" class="layui-input" id="test1" placeholder=" 请输入您想查询的库存前几名(例如：10) " style="width: 300px">--%>
<%--                        </div>--%>
<%--                        <div class="layui-input-inline">--%>
<%--                            <button type="button" class="layui-btn" lay-submit=""  id="serachBtn" style="margin-left: 6px;">立即查询</button>--%>
<%--                            <button type="reset" class="layui-btn layui-btn-primary" id=""reload>重置</button>--%>
<%--                        </div>--%>
<%--                    </form>--%>

<%--                    <div id="box2" style="width: 98%;height: 330px"></div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>

        <div class="layui-col-sm8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">在职员工全国分布详情</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space15" style="height: 343px">
                                <div class="layui-col-sm5">
                                    <table id="demo" class="layui-table" lay-filter="test"></table>
                                </div>
                                <div class="layui-col-sm7">
                                    <div id="box1" style="width: 98%;height: 350px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="layui-card">
                <div class="layui-card-header">当前登录详情</div>
                <div class="layui-card-body">
                    <table class="layui-table layuiadmin-page-table" lay-skin="line">
                        <tbody>
                        <tr>
                            <td>姓名：</td>
                            <td><i class="layui-icon layui-icon-username"> ${sessionScope.login.eName}</i></td>
                        </tr>
                        <tr>
                            <td>性别：</td>
                            <td><i class="layui-icon layui-icon-rate">${sessionScope.login.eSex}</i></td>
                        </tr>
                        <tr>
                            <td>职位：</td>
<%--                            <td><i class="layui-icon layui-icon-release"> ${sessionScope.temployee.trole.rname}</i></td>--%>
                            <td><i class="layui-icon layui-icon-release"> 店长 </i></td>
                        </tr>
                        <tr>
                            <td>部门：</td>
<%--                            <td><i class="layui-icon layui-icon-group"> ${sessionScope.temployee.tdepartment.dName}</i></td>--%>
                            <td><i class="layui-icon layui-icon-group"> 人事部 </i></td>
                        </tr>
                        <tr>
                            <td>城市：</td>
                            <td><i class="layui-icon layui-icon-find-fill"> 中</i></td>
                        </tr>
                        <tr>
                            <td>入职时间：</td>
                            <td><i class="layui-icon layui-icon-log"> ${sessionScope.login.eIndate}</i></td>
                        </tr>
                        <tr>
                            <td>当前登录IP：</td>
                            <td><i class="layui-icon layui-icon-chart-screen" id="ipaddress"></i></td>
                        </tr>
                        <tr>
                            <td>本机系统：</td>
                            <td><i id="osname"></i></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
<%--<script src="${pageContext.request.contextPath}/layui/layuiadmin/layui/layui.js"></script>--%>
<script>

    layui.use(['layer','jquery','table'],function () {
        var layer = layui.layer;
        var table = layui.table;
        var $ = layui.jquery;

        $(function () {
            value1="";
            showChartOne();
            showChartTwo();
            showTable();
        })

        //根据前几名查询(库存)
        var value1;
        $("#serachBtn").on("click",function () {
            var value = $("#test1").val();
            if (value == "" || value == undefined || !(/(^[1-9]\d*$)/.test(value))){
                value1 = "";
                layer.msg("请输入正确的查询格式",{icon:5});
            }else {
                value1 ='';
            }
            showChartTwo();
        });
    //刷新  reload

        $("#reload").on("click",function () {

                value1 = null;
            showChartTwo();
        });


        //职工分布表
        function showTable(){
            table.render({
                elem: '#demo' //绑定容器的id属性值
                ,height: 290
                ,url: "${pageContext.request.contextPath}/templyee/querySEmpCount" //数据接口
                ,page: true //开启分页
                ,limit:5
                ,limits:[5,10,15]
                ,id:'temp'
                ,text: {
                    none: '暂无员工分布数据！' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
                ,cols: [[ //表头
                    {field: 'aa', title: '序号', type: "numbers", sort: true,width:'33%',align:'center'}
                    ,{field: 'eaddress', title: '城市',align:'center'}
                    ,{field: 'totalAdress', title: '人数',align:'center'}
                ]],
            });
        }

        //职工分布图
        function showChartOne() {
            var chartDom = document.getElementById('box1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical', // 布局方式，默认为水平布局，可选为：
                                        // 'horizontal' ¦ 'vertical'
                    left: 'left',
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name:'详情',
                        type: 'pie',
                        radius: [40, 100],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: []
                    }
                ]
            };

            option && myChart.setOption(option);
            /*            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画*/

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/templyee/querySEmpCounttwo",    //请求发送到TestServlet
                success : function(result) {
                console.log(result)
                    myChart.setOption({        //填入数据
                        legend: {
                            data: result.eAddress
                        },
                        series: [{
                            data: (function(){
                                var rs = [];
                                for(var res=0;res<result.length;res++){
                                    rs.push({
                                        name :result[res].eaddress,
                                        value:result[res].totalAdress
                                    });
                                }
                                return rs;
                            })()
                        }]
                    });
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("职工分布图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };

        //库存表
        function showChartTwo() {
            var myChart = echarts.init(document.getElementById('box2'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                dataZoom:
                    [
                        {type: 'inside'},        //用于添加滚轮缩放
                        {type:'slider' },  //用于添加滑动条缩放，
                    ],
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        rotate: 45,
                    },
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            });

            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

            var names=[];    //类别数组（实际用来盛放X轴坐标值）
            var nums=[];    //销量数组（实际用来盛放Y坐标值）
            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/bookCharts/BookSumCount",    //请求发送到TestServlet处
                data: {"value":value1},
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            names.push(result[i].bookname);    //挨个取出类别并填入类别数组
                        }
                        for(var i=0;i<result.length;i++){
                            //  nums.push(result[i].productionArrangement.number);    //挨个取出销量并填入销量数组daliy
                            nums.push(result[i].bookcount);
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            xAxis: {
                                data: result.name
                            },
                            series: [
                                {
                                    // 根据名字对应到相应的系列
                                    name: result.name,
                                    data: result.value,
                                    itemStyle: {
                                        normal: {
                                            //这里是重点
                                            color:function() {
                                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                                /*                                              var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                                                                                                for (var i=0;i<nums.length;i++){
                                                                                                    if (nums[i]>1){
                                                                                                        return colorList[5];
                                                                                                    }
                                                                                                }*/
                                                //随机显示
                                                return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);
                                            }
                                        }
                                    }
                                },
                            ]
                        });

                    }
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("库存图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });
        };



        $.ajax({
            type:'post',
            url:'${pageContext.request.contextPath}/bookChart/BookSumCountonr',
            async:true,
            dataType: 'json',
            success:function (delAllData) {
                console.log(delAllData);
                var value1=delAllData.value1;
                var value2=delAllData.value2;
                var value3=delAllData.value3;
                $('#bookscount1').html(value1);
                var bb1 = Math.round(value1/value3*10000)/100+"%";
                $('#bookb1').html(" "+bb1);

                $('#bookscount2').html(value2);
                var bb2 = Math.round(value2/value3*10000)/100+"%";
                $('#bookb2').html(" "+bb2);

                $('#bookscount3').html(value3);
                if (value3>=100) {
                    $('#bookb3').attr("style","color: green;font-size:14px;").html(" 库存充足");
                }else {
                    $('#bookb3').attr("style","color: red;font-size:14px;").html(" 库存不足");
                }
            }
        });

        //请求本机信息
        $.ajax({
            type:'post',
            url:'${pageContext.request.contextPath}/Os/detail',
            async:true,
            dataType: 'json',
            success:function (delAllData) {
                $('#ipaddress').html(" " + delAllData.ip);
                if (delAllData.osname.match("Windows")) {
                    $('#osname').attr("class","layui-icon layui-icon-windows").html(" "+delAllData.osname);
                }else if (delAllData.osname.match("Mac")){
                    $('#osname').attr("class","layui-icon layui-icon-ios").html(" "+delAllData.osname);
                }else {
                    $('#osname').attr("class","layui-icon layui-icon-website").html(" "+delAllData.osname);
                }
            }
        });

        //在职员工详情
        $.ajax({
            type: 'post',
            url: '${pageContext.request.contextPath}/querySEmpCountYuan',
            async: true,
            dataType: 'json',
            success: function (delAllData){
                console.log(delAllData)                                        
                var count = 0;
                for (var i = 0; i < delAllData.length; i++) {
                    count = delAllData[i].dcount + count;
                }
                $('#bookscount4').html(count);
                for (var k = 0; k < delAllData.length; k++) {
                    if (delAllData[k].dId==${sessionScope.login.dId}) {
                        var bb3 = Math.round(delAllData[k].dcount/ count * 10000) / 100 + "%";
                        $('#bookb4').html(" " + bb3);
                    }                                                         
                }
                if (bb3 == null) {
                    $('#bookb4').attr("style", "font-size:14px;").html(" 获取所在部门失败");
                }
            }
        })
    });
</script>
</body>
</html>